<template>
  <template
    v-if="
      !userInfoStore.token ||
      (userInfoStore.token &&
        userInfoStore.userInfo &&
        userInfoStore.userInfo.registerStatus == 0 &&
        userInfoStore.userInfo.userType === 1)
    "
  >
    <button
      class="left flex flex-row justify-center items-center"
      open-type="getPhoneNumber"
      @getphonenumber="onUserInfo"
      style="
        background: transparent;
        line-height: 0;
        padding-left: 0;
        padding-right: 0;
      "
    >
      <up-avatar :src="userAvatar" shape="circle" size="21"></up-avatar>
      <text class="user-name mx-2 color-white">{{ userName }}</text>
      <view class="tag-view mr-1" v-if="showStatusTag">
        <uni-tag
          :text="statusTagName"
          type="success"
          custom-style="background-color: #fff; border: none; color: #0189FE;font-size:25rpx; border-radius: 8rpx; height:35rpx; line-height:35rpx; padding: 4rpx 8rpx;"
        />
      </view>
      <up-icon
        v-if="showMoreIcon"
        name="arrow-right"
        color="#fff"
        size="10"
      ></up-icon>
    </button>
  </template>
  <template v-else>
    <view
      class="left flex flex-row justify-center items-center"
      @click="onUserInfo"
    >
      <up-avatar :src="userAvatar" shape="circle" size="21"></up-avatar>
      <text class="user-name mx-2 color-white">{{ userName }}</text>
      <view class="tag-view mr-1" v-if="showStatusTag">
        <uni-tag
          :text="statusTagName"
          type="success"
          custom-style="background-color: #fff; border: none; color: #0189FE;font-size:25rpx; border-radius: 8rpx; height:35rpx; line-height:35rpx; padding: 4rpx 8rpx;"
        />
      </view>
      <up-icon
        v-if="showMoreIcon"
        name="arrow-right"
        color="#fff"
        size="10"
      ></up-icon>
    </view>
  </template>
</template>
<script setup lang="ts">
import { useUserInfoStore } from "@/stores/userInfo";
const userInfoStore = useUserInfoStore();

const props = defineProps({
  userAvatar: {
    type: String,
    default: "",
  },
  userName: {
    type: String,
    default: "",
  },
  showStatusTag: {
    type: Boolean,
    default: false,
  },
  statusTagName: {
    type: String,
    default: "",
  },
  showMoreIcon: {
    type: Boolean,
    default: true,
  },
});

const emit = defineEmits(["onUserInfo"]);
const onUserInfo = (e: any) => {
  emit("onUserInfo", e);
};
</script>
<style lang="scss">
button::after {
  border: none;
}
.user-name {
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-size: 29rpx;
}
</style>
